<template>
  <div class="flex items-center justify-start gap-4 md:w-auto md:justify-end">
    <RouterLink
      v-for="link in links"
      :key="link.path"
      :to="link.path"
      class="rounded-full border border-neutral/60 px-6 py-2 font-sans text-sm transition-colors duration-300 hover:border-primary/40 hover:text-primary hover:shadow-xl hover:shadow-primary/20"
    >
      {{ link.title }}
    </RouterLink>
  </div>
</template>
<script setup lang="ts">
const links = [
  {
    title: "作者",
    path: "/authors",
  },
  {
    title: "标签",
    path: "/tags",
  },
];
</script>
